import { useModel } from "@umijs/max"
import { App, Button, Card, Modal, Row } from "antd"
import React, { useEffect, useState } from "react"
import { Image, Layer, Stage } from "react-konva"

// 图像组件
const TotalBoardImage: React.FC<{ imageData: string | null }> = ({ imageData }) => {
  const [image, setImage] = useState<HTMLImageElement | null>(null)

  useEffect(() => {
    if (imageData) {
      const img = new window.Image()
      img.src = `data:image/jpeg;base64,${imageData}`
      img.onload = () => {
        setImage(img)
      }
    } else {
      setImage(null)
    }
  }, [imageData])

  return (
    <Image
      image={image}
      width={image ? image.width : 1200}
      height={image ? image.height : 880}
    />
  )
}

const BoardSizeCheckModal: React.FC = () => {
  const { callPy } = useModel("websocketModel")
  const {
    sizeCheckImageData,
    sizeCheckModalVisible,
    inputSize,
    boardSize,
    boardCalcError,
    updateProduceData
  } = useModel("produceModel")
  const { message } = App.useApp()

  const closeModal = () => {
    updateProduceData({
      sizeCheckModalVisible: false,
      sizeCheckImageData: null,
      inputSize: null,
      boardSize: null,
      boardCalcError: null
    })
  }

  // 处理函数
  const handleKeepOkSize = async () => {
    closeModal()
    const response = await callPy("produce", "keep_ok_size_from_web", [])
    if (response.state) {
      message.success("确认尺寸成功")
    } else {
      message.error("确认尺寸失败:" + response.info, 5)
    }
  }

  const handleNextBoardRes = async () => {
    closeModal()
    const response = await callPy("produce", "next_board_res_from_web", [])
    if (!response.state) {
      message.error("切换下一个失败:" + response.info, 5)
    }
  }

  const handleLastBoardRes = async () => {
    closeModal()
    const response = await callPy("produce", "last_board_res_from_web", [])
    if (!response.state) {
      message.error("切换上一个失败:" + response.info, 5)
    }
  }

  const handleHandInnerBoardSize = async () => {
    closeModal()
    const response = await callPy("produce", "hand_inner_board_size_from_web", [])
    if (!response.state) {
      message.error("人工标注失败:" + response.info, 5)
    }
  }

  return (
    <Modal
      title={
        <span style={{ color: "orange", fontSize: 16, fontWeight: "bold" }}>
          首片内板尺寸确认框
        </span>
      }
      open={sizeCheckModalVisible}
      width="90vw"
      style={{ top: 5 }}
      footer={null}
      closable={false}
    >
      <Card>
        <Card.Grid style={{ width: "70%", textAlign: "left" }}>
          <Stage width={600} height={600}>
            <Layer>
              <TotalBoardImage imageData={sizeCheckImageData} />
            </Layer>
          </Stage>
        </Card.Grid>
        <Card.Grid style={{ width: "30%", textAlign: "left" }}>
          <h3>
            <span style={{ color: "orange", fontWeight: "bold", fontSize: 18 }}>
              重要步骤,一定要好好确认!!!!!!
            </span>
          </h3>

          <p>
            <span
              style={{
                color: "#FF4D4F", // 使用 Ant Design 的警告色
                fontSize: 16, // 增大字体
                fontWeight: 500, // 加粗
                lineHeight: "24px" // 增加行高提高可读性
              }}
            >
              请确认识别的绿色框是否是正确的内板区域,不包含胶边,这一步非常的重要
            </span>
          </p>
          <p>
            工单尺寸:&nbsp;&nbsp; (宽,高) = ({inputSize?.[0]},&nbsp;{inputSize?.[1]})
          </p>
          <p>
            识别尺寸:&nbsp;&nbsp; (宽,高) = ({boardSize?.[0]},&nbsp;{boardSize?.[1]})
          </p>
          <p>
            识别误差:&nbsp;&nbsp; (宽,高) = ({boardCalcError?.[0]},&nbsp;
            {boardCalcError?.[1]})
          </p>
          <Row>
            <Button style={{ width: 120 }} type="primary" onClick={handleKeepOkSize}>
              识别OK
            </Button>

            <Button
              type="primary"
              onClick={handleHandInnerBoardSize}
              style={{ marginLeft: 10 }}
            >
              人工标注内板尺寸
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Button style={{ width: 120 }} type="primary" onClick={handleNextBoardRes}>
              下一个结果
            </Button>
            <Button
              style={{ width: 120, marginLeft: 10 }}
              type="primary"
              onClick={handleLastBoardRes}
            >
              上一个结果
            </Button>
          </Row>
        </Card.Grid>
      </Card>
    </Modal>
  )
}

export default () => (
  <App>
    <BoardSizeCheckModal />
  </App>
)
